<template>
    <div>
        <span class="title">{{route.children.name}}</span>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><span class="d"><i class="iconfont icon-piaojufuwu"></i>{{route.name}}</span></el-breadcrumb-item>
            <el-breadcrumb-item :to="'/'+route.path+'/'+route.children.path">{{route.children.name}}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop, Emit } from 'vue-property-decorator'
  import { Getter, Mutation, State } from 'vuex-class'

  @Component({
    components: {}
  })
  export default class User extends Vue {
    @Getter BreadMap
    @Mutation makeBreadList
    @Mutation changeNum

    get route () {
      if (this.BreadMap.name) {
        return this.BreadMap
      } else {
        return {
          children: {
            name: ''
          }
        }
      }
    }

    mounted () {
      this.makeBreadList(this)
    }
  }
</script>

<style lang="less" scoped>
    .title {
        line-height: 34px;
        font-size: 24px;
        color: #666;
    }

    .el-breadcrumb {
        line-height: 36px;
    }

    .d {
        color: #4E93FF !important;
    }
    .iconfont {
        margin-right: 6px;
    }
</style>
